<template>
	<view class="main-dislogue">
		<view class="header-suspension">
			<!-- <view class="record-btn">悬浮</view> -->
		</view>




		<scroll-view scroll-y="true" style="height: 88vh;" :scroll-into-view="toItem">
			<!-- <view id="msglistview" v-for="(item,index) in dest" :key="index">
					<view class="ask">
						<view class="ask-text">
							<view class="ask-desc" style="word-break: break-all;">
								{{item.ask}}
							</view>
						</view>
						<text class="ask-bulge"></text>
						<view class="ask-avatar">
							<image class="ask-sex" src="" fit="contain"></image>
						</view>
					</view>
					<view class="answer">
						<view class="answer-avatar">
							<image class="answer-ai" src="" fit="contain"></image>
						</view>
						<text class="answer-bulge"></text>
						<view class="answer-text">
							<view class="answer-desc" ref="copyAiContent" v-if = "item.isGet">......</view>
							<view class="answer-desc" ref="copyAiContent" v-else >{{item.answer}}</view>
						</view>
					</view>
				</view> -->



			<view class="msglistview" v-for="(item,index) in messages" :key="index" :id="'item-'+index">

				<view class="ask" v-show="item.role === 'user'">
					<view class="ask-text">
						<view class="ask-desc" style="word-break: break-all;">
							{{item.content}}

						</view>
					</view>
					<text class="ask-bulge"></text>
					<view class="ask-avatar">
						<image class="ask-sex" :src="info.avatar" fit="contain"></image>
					</view>
				</view>
				<view class="answer" v-show="item.role === 'assistant'" >
					<view class="answer-avatar">
						<image class="answer-ai" src="@/static/images/testHeader/head4.jpeg" fit="contain"></image>
					</view>
					<text class="answer-bulge"></text>

					<view class="answer-desc" ref="copyAiContent" >
							{{item.content}}
					</view>

				</view>
				
				
			</view>
			<view class="answer"  v-if="isGet === true">
				<view class="answer-avatar">
					<image class="answer-ai" ：src="@/static/images/testHeader/head4.jpeg" fit="contain"></image>
				</view>
				<text class="answer-bulge"></text>
			
				<view class="answer-desc" ref="copyAiContent" >......</view>
				
			
			</view>
			
			
		</scroll-view>

		<!-- <view class="safe-area-inset-bottom" /> -->

		<view class="bottom">
			<input class="bottom-input" name="name" placeholder="请输入" @input="talkto" v-model="inputdisplay" />
			<button class="bottom-button" type="primary" @click="sendMsg">发送</button>
		</view>

	</view>

</template>
<script setup>
	import {
		ref,
		onMounted,
		nextTick,
		watch
	} from 'vue'
	import { onLoad} from '@dcloudio/uni-app'
	import apis from '/api/apis.js'
	const msg = ref('')
	const scrollTop = ref(0) //距离顶部滚动值默认0
	const inputdisplay = ref('') //输入框状态，发送后清空
	const isGet = ref(false)
	const askdisplay = ref('') //对话框发送方状态
	const id = ref(1773592) //请求必须，后期再改
	const ai_content = ref('') //接收请求返回内容
	const answerpopup = ref(null)
	const infopopup = ref(null)

	const toItem = ref("")
	// const dest = ref([])//数组追加 对话效果

	const messages = ref([{
		role: 'assistant',
		content: '欢迎来到我们的平台，有什么可以帮助您的？'
	}])

	const talkto = (e) => {
		msg.value = e.detail.value
		inputdisplay.value = e.detail.value
		// console.log(inputdisplay.value)
	}
	// 重新赋值item,延迟到dom更新之后进行，否则没效果

	const info = ref({})
	onLoad(()=>{
		info.value = uni.getStorageSync('userInfo')
		console.log(info.value)
	})
	//处理发送消息
	const sendMsg = async () => {
		isGet.value = true
		if (inputdisplay.value.trim() )
			// askdisplay.value = inputdisplay.value
			inputdisplay.value = ''

		if (msg.value.trim() ) {
			// dest.value.push({ ask: msg.value, answer: '',isGet:true })
			messages.value.push({
				role: 'user',
				content: msg.value
			})
			console.log("我是随便")
			console.log(isGet.value)

		console.log(isGet.value)
			apis.sendMessage(msg.value, id.value).then((res) => {
				// console.log(res.data)
				// 添加assistant消息
				const newassistantMessage = {
					role: 'assistant',
					content: res.data
					//  content: currentHTML
				}


				messages.value.push(newassistantMessage)
				isGet.value = false
			})
			// ai_content.value = res.data

			// const lastIndex = dest.value.length - 1
			// dest.value[lastIndex].answer = ai_content.value
			// dest.value[lastIndex].isGet = false

			// console.log(conversation.value.ask)
			// console.log(conversation.value.answer)
			// console.log(dest.value)
			msg.value = ''
			

		} else
			uni.showToast({
				title: '内容为空或AI正在生成',
				icon: 'none'
			});
	}

watch(messages,(newval,oldval)=>{
	
		// 重新赋值item,延迟到dom更新之后进行，否则没效果
		nextTick(()=>{
			setTimeout(()=>{
			toItem.value = "item-" + (newval.length - 1)
			},200)
		})
	},{
		deep:true, //深度监视
		immediate:true //初始化立即执行
	})


	// 获取上一次的会话
	// const getLastSession = () => {
	// 	apis.getHistoryLatest().then((res) => {
	// 		if (res.data != null) {
	// 			// router.push('/smartHelper?sessionId=' + res.data.data.sid)

	// 			messages.value = res.data.roleContentList
	// 			console.log(messages.value)
	// 			// router.push('/smartHelper?sessionId=' + res.data.data.sid)
	// 			// alert(res.data.data.sid)

	// 			// toBottom()
	// 		}
	// 	})
	// }
	// 上面的请求 返回的数据不全

	// 加载单个会话的方法
	const loadSession = async (sessionId) => {
		try {
			const response = await apis.getHistoryById(sessionId)
			messages.value = response.data.roleContentList
			console.log("第一")

			console.log("第二")
		} catch (error) {
			console.error('会话加载失败:', error)
		}
	}





	// 	console.log("你好")






	// const toBottom = ()=>{
	// 	nextTick(()=>{

	// 	})
	// }




	// getLastSession();
	onMounted(() => {
		loadSession(id.value);

	})
</script>
<style lang="scss" scoped>
	

	.main-dislogue {
		height: calc(100vh - 20rpx);
		background: #f5f5f5;
		display: flex;
		flex-direction: column;
	}

	/* 头部悬浮 */
	.header-suspension {
		width: 100rpx;
		height: 300rpx;
		/* pointer-events: none; */
		z-index: 100;
		position: fixed;
		right: 10rpx;
		bottom: 300rpx;
	}

	.head-image {
		width: 74rpx;
		height: 74rpx;
		z-index: 99;
		background: #d4d4d4;
		border-radius: 50%;
		padding: 6rpx;
		box-shadow: 0px 2rpx 20rpx rgba(0, 0, 0, 0.5);
	}

	.record-btn {
		width: 74rpx;
		height: 74rpx;
		background: #FFFFFF;
		border-radius: 50%;
		font-size: 26rpx;
		text-align: center;
		padding: 6rpx;
		box-shadow: 0px 2rpx 20rpx rgba(0, 0, 0, 0.5);
		color: #4A90E2;
		margin-top: 29rpx;
	}

	/* 内容 */
	.content {
		padding: 12rpx;
		padding-bottom: 100px;
		background: #f5f5f5;
		// height: auto;
	}

	/* #scrollpage {
} */

	/* 问 */
	.ask {
		display: flex;
		justify-content: flex-end;
		width: 100%;
		margin-top: 6rpx;
	}

	.ask-avatar {
		width: 120rpx;
		margin-top: 20rpx;
	}

	.ask-sex {
		width: 100rpx;
		height: 100rpx;
	}

	.ask-bulge {
		position: relative;
		top: 41rpx;
		right: 23rpx;
		display: block;
		width: 0;
		height: 0;
		border: 15rpx solid #4A90E2;
		transform: rotate(45deg);
	}

	.ask-text {
		z-index: 1;
	}

	.ask-desc {
		background: #4A90E2;
		border-radius: 13rpx;
		padding: 15rpx;
		line-height: 58rpx;
		margin-top: 27rpx;
		white-space: pre-line;
		word-break: break-all;
		color: #fff;
		margin-left: 124rpx;
	}

	/* 答 */
	.answer {
		display: flex;
		justify-content: flex-start;
		margin-top: 6rpx;
	}

	.answer-avatar {
		width: 120rpx;
		margin-top: 20rpx;
		margin-left: 30rpx;
	}

	.answer-ai {
		width: 100rpx;
		height: 100rpx;
	}

	.answer-bulge {
		position: relative;
		top: 41rpx;
		left: 23rpx;
		display: block;
		width: 0;
		height: 0;
		border: 15rpx solid #ffffff;
		transform: rotate(45deg);
	}

	.answer-text {
		z-index: 1;
	}

	.answer-desc {
		margin-right: 88rpx;
		border-radius: 13rpx;
		line-height: 58rpx;
		background: #fff;
		margin-top: 27rpx;
		tab-size: 12rpx;
		padding: 15rpx;
		white-space: pre-wrap;
		box-shadow: 0rpx 5rpx 47rpx 0rpx #97979773;
	}

	/* 尾部 */
	.bottom {
		border-top: 2rpx solid #CCCCCC;
		background: #f5f5f5;
		display: flex;
		padding: 10rpx;
		padding-bottom: 50rpx;


		position: fixed;
		bottom: 0;
		z-index: 99;
		width: 100%;
	}

	.bottom-input {
		flex: 1;
		font-size: 35rpx;
		border-radius: 10rpx;
		background: #FFFFFF;
		padding: 17rpx;

	}

	.bottom-button {
		width: 190rpx;
		height: 80rpx;
		font-size: 14px;
		line-height: 80rpx;
		margin-left: 20rpx;
		background: #4A90E2 !important;
	}

	.infopop {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 30rpx 30rpx 0 0;
		overflow: hidden;

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title {
				color: black;
				font-size: 30rpx;
				font-weight: 600;
				// padding-left: 6rpx;
			}

			.close {
				padding: 6rpx;
			} 
		}


	}
</style>